import React, { PureComponent, Fragment } from 'react';
import styles from './index.less';
import {
  Drawer,
  Switch,
  Tooltip
} from 'antd';
import debounce from 'lodash/debounce';
import { routerRedux } from 'dva/router';
import { connect } from 'dva';
import Detail from './../Meters/Detail'

@connect(({ devices, loading }) => ({
  devices
}))
class BasicList extends PureComponent {
  constructor(props) {
    super(props);
    this.scrollInterval = '';

    this.state = {
      boxH: 0,
      listMarginTop: '0',
      animate: false,
      auto: localStorage.getItem('rank-auto')==1?true:false,
      data:[],
      editRecord:{}
    };
  }


  componentDidMount() {
    this.props.changeCustomH();
    this.startSerInterval();

  }

  componentWillUnmount() {
    if (this.scrollInterval) {
      clearInterval(this.scrollInterval);
    }
  }

  startSerInterval = () => {
    if (this.scrollInterval) {
      clearInterval(this.scrollInterval);
    }
    if (!this.state.auto) {
      return false;
    }
    const that = this;
    this.scrollInterval = setInterval(function() {
      let scrollList = document.querySelector('#scrollList');
      let scrollListUl = document.querySelector('#scrollList ul');
      if (scrollList.offsetHeight + scrollList.scrollTop >= scrollListUl.offsetHeight) {
        clearInterval(that.scrollInterval);
        scrollList.scrollTop =0
        that.startSerInterval();
      } else {
        scrollList.scrollTop = scrollList.scrollTop + 1;
      }
    }, 100);
  };

  render() {
    const { dispatch } = this.props;
    return <div>
      <div className={`${styles.header_title} draggableHandle`}>
        <h3>
          水表用水量排行
        </h3>

      </div>
      <Switch checked={this.state.auto} onChange={(checked) => {
        if(checked){
          localStorage.setItem('rank-auto','1')
        }else{
          localStorage.setItem('rank-auto','-1')
        }
        this.setState({
          auto: checked,
        }, function() {

          this.startSerInterval();
        });
      }} className={styles.rank_btn} checkedChildren="开" unCheckedChildren="关" defaultChecked/>
      <div className={`${styles.range} ${styles.range_header}`}>
        <ul>
          <li>
            <div className="rank" onClick={() => {
            }
            }>排行
            </div>
            <div className="name" onClick={() => {
            }
            }>水表号
            </div>
            <div className="name">安装地址</div>
            <div className="positive_cumulative_flow">当天用水量(m3)</div>
            <div className="positive_cumulative_flow">累计用水量(m3)</div>
          </li>
        </ul>
      </div>
      <div className={styles.range} style={{ height: this.props.boxH + 'px' }} id={'scrollList'}>
        <ul style={{ marginTop: this.state.listMarginTop }} onMouseEnter={() => {
          if (this.scrollInterval) {
            clearInterval(this.scrollInterval);
          }
        }} onMouseLeave={() => {
          this.startSerInterval();
        }}>
      {/*    <div style={{color:'white'}}>
            123
            这里是需要滚动的文本内容，可以是长段文本或者动态生成的内容 这里是需要滚动的文本内容，可以是长段文本或者动态生成的内容。
            这里是需要滚动的文本内容，可以是长段文本或者动态生成的内容 这里是需要滚动的文本内容，可以是长段文本或者动态生成的内容。
            这里是需要滚动的文本内容，可以是长段文本或者动态生成的内容 这里是需要滚动的文本内容，可以是长段文本或者动态生成的内容。
            这里是需要滚动的文本内容，可以是长段文本或者动态生成的内容 这里是需要滚动的文本内容，可以是长段文本或者动态生成的内容。
            这里是需要滚动的文本内容，可以是长段文本或者动态生成的内容 这里是需要滚动的文本内容，可以是长段文本或者动态生成的内容。
            这里是需要滚动的文本内容，可以是长段文本或者动态生成的内容 这里是需要滚动的文本内容，可以是长段文本或者动态生成的内容。

          </div>*/}

          {
            this.props.rank.map((item, index) => {
              return <li key={index}>
                <div className="rank-content">{index+1}</div>
                <div className="name">
                  <Tooltip title={item.meter_number}>
                  <span onClick={() => {
                    this.setState({
                      infoModal:true,
                      editRecord:item
                    })
                  }}>{item.meter_number}</span>
                </Tooltip></div>
                <div onClick={() => {
                  this.setState({
                    infoModal:true,
                    editRecord:item
                  })
                }} className="name"><Tooltip placement="topLeft" title={item.address}>{item.address}</Tooltip></div>
                <div className="positive_cumulative_flow">{item.consumption.toFixed(2)}</div>
                <div className="positive_cumulative_flow">{item.value.toFixed(2)}</div>
              </li>;
            })
          }
        </ul>
      </div>
      <Drawer
        title={`${this.state.editRecord.meter_number} 详情`}
        placement="right"
        destroyOnClose
        onClose={() => {
          this.setState({
            infoModal: false,
            editRecord: {},
          });
        }}

        width={700}
        visible={this.state.infoModal}
      >
        <Detail id={this.state.editRecord.meter_id}></Detail>
      </Drawer>
    </div>;
  }
}

export default BasicList;
